<template>
  <div class="ex_page">
    <div class="css_demo" @click="socialAnlPlay">
      <div class="el">
        <div></div>
        <div></div>
      </div>
      <div class="copy_el">
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="count_box">
      <span class="count">0</span>
      <a-button @click="countAnlPlay">restart</a-button>
    </div>
    <Circle
      ref="circleRef"
      v-bind="{
        stroke: 'hotpink',
        rate: 64.11,
        countColor: '#202121',
      }"
    />
    <div>X轴 {{ pos.x }} - Y轴 {{ pos.y }}</div>
  </div>
</template>

<script lang="ts" setup>
import anime from 'animejs';
import type { SocialAnl } from '@/types/animejsType';
import { nextTick, ref } from 'vue';
import type { Ref } from 'vue';
import { ex } from '@/cusHooks/ex';
import Circle from '@/components/circle.vue';
const circleRef = ref<null | Ref>(null);

let socialAnl: SocialAnl;
let countAnl: SocialAnl;
// vue hook
const pos = ex(10, 20);

nextTick(() => {
  countAnl = anime({
    targets: '.count',
    innerHTML: [0, 64.11],
    easing: 'linear',
    round: 100, // Will round the animated value to 1 decimal
  });
  socialAnl = anime({
    targets: '.css_demo .copy_el',
    translateX: 250,
    delay: 300,
    autoplay: false,
  });
});

const socialAnlPlay = () => {
  socialAnl.play();
};
const countAnlPlay = () => {
  circleRef.value.restart();
  countAnl.play();
  // console.log(circleRef.value);
};
</script>

<style lang="scss" scoped>
.ex_page {
  .css_demo {
    position: relative;
    width: 400px;
    height: 100px;
    border: 1px solid black;
    cursor: pointer;

    .el,
    .copy_el {
      position: absolute;
      top: 0;
      left: 20px;
      div {
        width: 20px;
        height: 20px;
        background-color: red;
        margin: 10px 10px;
      }
    }
    .el {
      div {
        opacity: 0.4;
      }
    }
  }
}

.count_box {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 40px;
  margin: 20px auto;
  .count {
    line-height: 32px;
    padding-right: 20px;
  }
}
</style>
